<script>
import {getNowFormatDate} from "@/utils/common";
import accountApi from "@/api/accountApi";

export default {
  name: 'indexView',
  data() {
    return {
      viewFrom: '',
      showKeyboard: false,
      showFooter: true,
      itemName: "",
      itemId: "",
      remark: "",
      amount: "",
      lists: [{
        value: '7',
        label: '7'
      }, {
        value: '8',
        label: '8'
      }, {
        value: '9',
        label: '9'
      }, {
        value: "date",
        label: '今天',
        image: require('@/assets/icons/png/date.png')
      }, {
        value: '4',
        label: '4'
      }, {
        value: '5',
        label: '5'
      }, {
        value: '6',
        label: '6'
      }, {
        value: '+',
        label: '+'
      },
        {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '-',
          label: '-'
        },
        {
          value: '.',
          label: '.'
        },
        {
          value: '0',
          label: '0'
        }, {
          value: 'delete',
          label: '',
          image: require('@/assets/icons/png/delete.png')
        }, {
          value: 'ok',
          label: '完成'
        }
      ],
      num1: "",
      num2: "",
      op: "",

    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    exit() {
      this.itemName = "";
      this.amount = "";
      this.remark = "";
      this.num1 = "";
      this.lists[3].label = "今天";
      this.lists[3].image = require('@/assets/icons/png/date.png');

      this.$parent.showFooter = true;
      this.$parent.showKeyboard = false;
    },
    choosekey(item, index) {
      let val = item.value;
      if (val == "date") {
        this.viewFrom = 'keyboard';
        this.$parent.openDatePicker()
      }
      // 实现删除效果
      if (val == "delete") {
        if (this.num2.length != 0) {
          this.num2 = this.num2.substring(0, this.num2.length - 1)
        } else if (this.op.length != "") {
          this.op = ""
        } else {
          this.num1 = this.num1.substring(0, this.num1.length - 1)
        }
      }
      // 实现小数点部分功能
      if (val == ".") {
        if (this.op == "") {
          if (this.num1.indexOf(".") > -1 || this.num1.length == 0) {
            return;
          } else {
            this.num1 = this.num1 + val;
          }
        } else {
          if (this.num2.indexOf(".") > -1 || this.num2.length == 0) {
            return;
          } else {
            this.num2 = this.num2 + val;
          }
        }
      }

      // 实现数字部分
      // 1.小数部分最后只能有两位
      // 2.整数部分只能有6位
      if (val >= 0 && val <= 9) {
        if (this.op == "") {
          if (this.num1 == "") {
            this.num1 = val;
          } else {
            if (this.num1.indexOf(".") === this.num1.length - 3 && this.num1.indexOf(".") !== -1) {
              return;
            } else if ((this.num1.indexOf(".") !== -1 && this.num1.length === 9) || (this.num1.indexOf(".") == -1 && this.num1.length == 6)) {
              return;
            } else {
              this.num1 = this.num1 + val;
            }
          }
        } else {
          if (this.num2.indexOf(".") === this.num2.length - 3 && this.num2.indexOf(".") !== -1) {
            return;
          } else if ((this.num2.indexOf(".") !== -1 && this.num2.length === 9) || (this.num2.indexOf(".") == -1 && this.num2.length == 6)) {
            return;
          } else {
            this.num2 = this.num2 + val;
            this.lists[15].label = "=";
          }
        }
      }

      if (val == "+" || val == "-") {
        if (this.num1 == "" && val == "+" || this.num1.length > 8) {
          return;
        } else if (this.num1 == "" && val == "-") {
          this.num1 = val;
        } else if (this.num1 !== "") {
          if (this.num1 == "-") {
            return;
          } else if (this.num2 == "") {
            this.op = val;
          } else if (this.num2 != "") {
            if (this.op == "+") {
              this.num1 = ((this.num1 - 0) + (this.num2 - 0)).toFixed(2) + ""
              let length = this.num1.length;
              if (this.num1.substring(length - 3, length) == ".00") {
                this.num1 = this.num1.substring(0, length - 3)
              }
            } else {
              this.num1 = ((this.num1 - 0) - (this.num2 - 0)).toFixed(2) + "";
              let length = this.num1.length;
              if (this.num1.substring(length - 3, length) == ".00") {
                this.num1 = this.num1.substring(0, length - 3)
              }
            }
            this.op = val;
            this.num2 = "";
            this.lists[15].label = "完成";
          }
        }
      }

      if (val == "ok") {
        if (this.lists[15].label == '=') {
          if (this.op == "+") {
            this.num1 = ((this.num1 - 0) + (this.num2 - 0)).toFixed(2) + ""
            let length = this.num1.length;
            if (this.num1.substring(length - 3, length) == ".00") {
              this.num1 = this.num1.substring(0, length - 3)
            }
          } else {
            this.num1 = ((this.num1 - 0) - (this.num2 - 0)).toFixed(2) + ""
            let length = this.num1.length;
            if (this.num1.substring(length - 3, length) == ".00") {
              this.num1 = this.num1.substring(0, length - 3)
            }
          }
          this.op = "";
          this.num2 = "";
          this.lists[15].label = "完成";
        } else {
          if (this.amount == "") {
            return;
          }
          let userId = window.localStorage.getItem("userId");
          let date = this.lists[3].label;
          if (this.lists[3].label == "今天") {
            date = getNowFormatDate();
          }
          var budget = {
            userId: userId,
            typeId: this.itemId,
            amount: this.amount,
            remark: this.remark,
            addtime: date
          }
          accountApi.insertOrUpdateBudget(budget)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$parent.$refs['accountView'].cancel();
                  this.mainView= 'detailView';
                }
              })
        }
      }

      this.amount = this.num1 + this.op + this.num2;
    }



  }
}
</script>

<template>
<div class="keyboard" >
  <div style="float: right;height: 20px">
    <el-input class="kbInput" disabled v-model="amount">{{ amount }}</el-input>
  </div>
  <div class="itemName">{{ itemName }}</div>
  <img src="@/assets/icons/png/down.png" class="exit" @click="exit">
  <div style="margin: auto">
    <el-input placeholder="请填写备注" v-model="remark" size="mini">
      <template slot="prepend">备注</template>
    </el-input>
  </div>
  <div class="number">
    <div
        class="numberitem"
        v-for="(item,index) in lists"
        :key="index"
        @click="choosekey(item,index)"
    ><img v-if="item.image" :src="item.image" class="numberIcon"/>
      {{ item.label }}
    </div>
  </div>
</div>
</template>

<style scoped>

.keyboard {
  background-color: #ffffff;
  width: 100%;
  display: flex;
  position: fixed;
  flex-wrap: wrap; /* 允许子元素换行 */
  left: 0;
  bottom: 0;
  //height: 200px;
  box-sizing: border-box;
  box-shadow: 0 0 5px 1px #999
}

.footer div {
  flex: 1;
  padding: 5px;
}

.footer div img {
  width: 30px;
  height: 30px;
}

.footer div span {
  display: block;
  color: rgb(168, 168, 168);
}

.exit {
  width: 20px;
  height: 20px;
  padding: 13px 3px 3px 3px;
}

.itemName {
  width: 80px;
  padding: 10px 20px 20px 20px;
  height: 20px;
  color: rgb(251, 219, 68);
}

.kbInput {
  width: 170px;
  padding: 0 0 0 25px;
}

.numberIcon {
  width: 20px;
  height: 20px;
  color: rgb(251, 219, 68);
}

.on {
  color: black;
  font-weight: bolder;
}

.el-notification.right{
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}



.number {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px;
}

.number .numberitem {
  height: 2.64533333rem;
  box-sizing: border-box;
  border-top: 4px solid #F4F4F4;
  border-right: 4px solid #F4F4F4;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-bar {
  display: flex;
  align-items: center; /* 垂直居中（如果需要的话） */
  padding: 0 !important;
  background-color: #f0f0f0;
  position: relative; /* 设置为相对定位，以便子元素可以使用绝对定位 */
}

.menu-item {
  /* 菜单项样式 */
  max-height: 50px;
  background-color: white;
  border: none;
  padding: 3px 20px;
  cursor: pointer;
  outline: none;
  border-radius: 5px;
  margin: 0 5px; /* 菜单项之间的间距 */
}

.main-button-wrapper {
  position: absolute; /* 绝对定位 */
  left: 50%; /* 水平居中，但稍后我们会通过transform来调整位置 */
  transform: translateX(-50%); /* 向左移动自身宽度的50%，以实现真正的水平居中 */
  bottom: 10px; /* 向下移动，突出半个圆的高度（假设圆形直径为60px，则半径为30px） */
  max-height: 70px;
}
/* 如果需要，可以添加hover效果来增强用户体验 */
.main-button:hover {
  /* 更改box-shadow颜色或样式以创建hover效果 */
  box-shadow: 0 -3px 0 0 rgb(100, 100, 100) inset;
}

.main-button {
  /* 圆形主按钮样式 */
  background-color: white;
  color: white;
  border-radius: 50%;
  width: 60px; /* 圆形直径 */
  max-height: 60px; /* 与宽度相同以形成圆形 */
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  /* 使用box-shadow来模拟只有上半圆的边框 */
  box-shadow: 0 1px 0 0 rgb(195, 194, 194) inset;
}
.menu-bar-container {
  border-top: 1px solid rgb(232, 231, 231);
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 50px;
  /* 如果需要，可以添加一些内边距或外边距来调整位置 */
}

.menu-bar {
  max-height: 50px;
  display: flex;
  align-items: center;
  padding: 10px 0; /* 移除水平padding，因为我们将通过margin在菜单项之间添加间距 */
  background-color: white;
  position: relative; /* 以便子元素可以使用绝对定位 */
}

</style>